<template>
  <div class="logstatistics-container">
    <div class="logstatistics-hd">
      <el-button type="text" :class="[{'normal': btnC !== 1}]" @click="handleSearch(1)">本周</el-button>
      <el-button type="text" :class="[{'normal': btnC !== 2}]" @click="handleSearch(2)">本月</el-button>
      <el-button type="text" :class="[{'normal': btnC !== 3}]" @click="handleSearch(3)">全年</el-button>
    </div>
    <div class="logstatistics-bd">
      <echats
        :chartId="'logBarChart'"
        ::width="'100%'"
        :height="'300px'"
        :option="logExchatsOption"
      ></echats>
    </div>
  </div>
</template>

<script>
import { logStatistics, updateLogStatistics } from "@/api/log";
import echats from "@/components/Echats/index";
import ws from "@/utils/websocket";
export default {
  components: {
    echats
  },
  data() {
    return {
      btnC: 1,
      logExchatsOption: {}
    };
  },
  created() {
    this.handleSearch(this.btnC);
    this.initWebsocket();
  },
  methods: {
    async handleSearch(num) {
      this.btnC = num;
      // 发送请求
      const { data } = await logStatistics(this.btnC);
      this.handlerData(data);
    },
    initWebsocket() {
      ws.init("ws://localhost:9000/web", this.gloabWebsocketReciveData);
    },
    // 获取后台服务的发送回来的数据
    gloabWebsocketReciveData(url) {
      // 通过websocket更新数据
      updateLogStatistics(url).then(resp => {
        this.handlerData(resp.data);
      });
    },
    handlerData(data) {
      console.log(data);
      this.logExchatsOption = {
        title: {
          text: "日志统计"
        },
        tooltip: {},
        dataset: {
          // 提供一份数据。
          source: [...data]
        },
        // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
        xAxis: {
          type: "category",
          axisLabel: {
            interval: 0, //代表显示所有x轴标签显示
            rotate: 45 //代表逆时针旋转45度
          }
        },
        // 声明一个 Y 轴，数值轴。
        yAxis: {
          type: "value"
        },
        // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
        series: [{ type: "bar" }]
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.logstatistics {
  &-container {
    margin: 30px;
    background-color: #fff;
  }

  &-hd {
    display: flex;
    justify-content: center;

    .normal {
      color: #000;
    }
  }

  &-bd {
    margin: 10px 0px 20px;
  }
}
</style>